<template>
  <el-drawer :visible.sync="visible" :with-header="false" size="calc(100% - 230px)">
    <div>
      <el-drawer title="课程详情" size="650px" :with-header="false" :append-to-body="true" :visible.sync="innerDrawer">
        <div class="right-container">
          <div class="container-header">
            <div style="font-size: 14px">留言查看</div>
            <div @click="handleCommentItemClose">
              <i class="el-icon-close" style="font-size: 18px"></i>
            </div>
          </div>
          <div class="container-content background-color-grey padding-10">
            <div class="bg-white border-radius">
              <div
                class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title ">
                <div>
                  <i class="el-icon-collection-tag" style="font-size: 18px"></i>
                  留言信息
                </div>
              </div>
              <div class="padding-lg flex ">
                <div class="flex-1">用户姓名：{{ manageItem.userName }}</div>
              </div>
              <div class="padding-lg flex ">
                <div class="flex-1">联系电话：{{ manageItem.userPhone }}</div>
              </div>
              <div class="padding-lg flex ">
                <div class="flex-1">留言时间：{{ manageItem.createTime }}</div>
              </div>
              <div class="padding-lg flex ">
                <div >课程内容：</div>
                <div><el-rate v-model="manageItem.rate" disabled ></el-rate></div>
              </div>
              <div class="padding-lg flex ">
                <div class="">讲师表现：</div>
                <div><el-rate v-model="manageItem.rate1" disabled ></el-rate></div>

              </div>
              <div class="padding-lg flex ">
                <div class="">学习体验：</div>
                <div><el-rate v-model="manageItem.rate2" disabled ></el-rate></div>

              </div>

              <div class="padding-lg flex ">
                <div class="flex-1">留言内容：{{ manageItem.content }}</div>

              </div>
            </div>

            <div class="bg-white border-radius margin-top-md padding-bottom-md">
              <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title">
                <div>
                  <i class="el-icon-collection-tag" style="font-size: 18px"></i>
                  留言审核
                </div>
              </div>
              <div class="padding-lr-lg">
                <el-form :model="manageItem" :rules="addManageItemRule" ref="addManageItem" label-width="80px">
                  <el-form-item label="审核状态" prop="isRandom">
                    <el-radio-group v-model="manageItem.auditStatus">
                      <el-radio :label="0">审核中</el-radio>
                      <el-radio :label="1">审核通过</el-radio>
                      <el-radio :label="2">审核拒绝</el-radio>

                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="留言回复" prop="auditComment">
                    <el-input v-model="manageItem.auditComment" type="textarea" placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item label="审核备注" prop="auditRemark">
                    <el-input v-model="manageItem.auditRemark" type="textarea" placeholder=""></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>

            <div class="flex justify-center padding-10">
              <el-button type="primary" @click="commentReplySubmit">保存</el-button>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">评价明细</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white padding-lg">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label="用户姓名">
              <el-input class="selectWidth" v-model="dataForm.userName" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户电话">
              <el-input class="selectWidth" v-model="dataForm.userPhone" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select class="selectWidth" v-model="dataForm.auditStatus" placeholder="">
                <el-option v-for="item in autitOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bg-white padding-10">
          <el-table ref="tableRef" :header-cell-style="tableHeaderStyle" :data="dataList" :height="height" border
            v-loading="dataListLoading" style="width: 100%;">

            <el-table-column prop="userName" header-align="center" align="center" width="100" label="姓名">
            </el-table-column>
            <el-table-column prop="userPhone" header-align="center" align="center" width="120" label="电话">
            </el-table-column>
            <el-table-column prop="createTime" header-align="center" align="center" width="170" label="时间">
            </el-table-column>
            <el-table-column prop="rate" header-align="center" align="center" width="100" label="课程内容">
            </el-table-column>
            <el-table-column prop="rate1" header-align="center" align="center" width="100" label="讲师表现">
            </el-table-column>
            <el-table-column prop="rate2" header-align="center" align="center" width="100" label="学习体验">
            </el-table-column>
            <el-table-column prop="content" header-align="center" align="center" label="内容">
            </el-table-column>
            <el-table-column prop="auditStatus" header-align="center" align="center" width="100" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.auditStatus == 0">审核中</span>
                <span v-else-if="scope.row.auditStatus == 1">审核通过</span>
                <span v-else>审核拒绝</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>


      </div>

    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '40px !important', padding: '4px !important' },
      height: 0,
      autitOptions: [
        {
          value: '',
          label: '请选择'
        }, {
          value: 0,
          label: '审核中'
        }, {
          value: 1,
          label: '已通过'
        }, {
          value: 1,
          label: '已拒绝'
        }
      ],
      dataForm: {
        userName: '',
        userPhone: '',
        auditStatus: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      manageItem: {
        name: '',
        studyName: '',
        auditStatus: '',
        auditRemark: '',
        auditComment: ''
      },
      innerDrawer: false,
      addManageItemRule:{
        auditStatus: [
          { required: true, message: '请选择审核状态', trigger: 'blur' }
        ],
        auditComment: [
          { required: true, message: '请输入审核内容', trigger: 'blur' }
        ]
      }

    }
  },
  components: {
  },
  mounted() {
    console.log(document.body.clientHeight)
    // 至于减去多少，这个要看你的页面高度和你想将滚动轴固定在哪里了，数值可以更换
    this.$nextTick(() => {
      let tableHeight = document.body.clientHeight - 275
      this.height = tableHeight
    })
  },
  methods: {
    repairTableByRef(refName) {
      this.$refs[refName].doLayout()
    },
    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer

    },
    handleCommentItemClose() {
      this.innerDrawer = false
    },
    init(id) {
      this.id = id
      this.visible = true;

      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let searchParams = {
        page: this.pageIndex,
        limit: this.pageSize,
        key: this.dataForm.userName,
        userPhone: this.dataForm.userPhone,
        manageId:this.id,
        auditStatus: this.dataForm.auditStatus
      }
      this.$http({
        url: this.$http.adornUrl('/class/comment/list'),
        method: 'get',
        params: this.$http.adornParams(searchParams)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
        this.repairTableByRef('tableRef')

      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    addOrUpdateHandle(item) {
      this.innerDrawer = true;
      this.manageItem = item
    },

    //审核回复和备注
    commentReplySubmit() {
      this.$http({
            url: this.$http.adornUrl(`/class/comment/update`),
            method: 'post',
            data: this.$http.adornData({
              id: this.manageItem.id,
              auditStatus: this.manageItem.auditStatus,
              auditComment: this.manageItem.auditComment,
              auditRemark: this.manageItem.auditRemark
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {

               //关闭弹窗
              this.handleCommentItemClose();
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
    }

  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}
</style>
